<template>
  <div class="body">
    <!-- 未登录头部 -->
    <div
      class="header"
      v-if="!user"
    >
      <div
        class="login-btn"
        @click="goLogin"
      >
        <img src="~@/assets/mobile.png">
        <span>登路/注册</span>
      </div>
    </div>
    <!-- 已登录头部 -->
    <div
      class="header-login"
      v-else
    >
      <div class="avatal">
        <div class="left">
          <van-image
            @click="$router.push('/user/'+userInfo.id)"
            round
            fit="cover"
            :src="userInfo.photo"
          />
          <span>{{userInfo.name}}</span>
        </div>
        <div
          class="right"
          @click="$router.push('/user/profile')"
        >编辑资料</div>
      </div>
      <div class="data">
        <div class="data-item">
          <div class="number">{{userInfo.art_count}}</div>
          <div class="content">头条</div>
        </div>
        <div
          class="data-item"
          @click="$router.push('user/fans/0/'+userInfo.id)"
        >
          <div class="number">{{userInfo.follow_count}}</div>
          <div class="content">关注</div>
        </div>

        <div
          class="data-item"
          @click="$router.push('user/fans/1/'+userInfo.id)"
        >
          <div class="number">{{userInfo.fans_count}}</div>
          <div class="content">粉丝</div>
        </div>
        <div class="data-item">
          <div class="number">{{userInfo.like_count }}</div>
          <div class="content">获赞</div>
        </div>
      </div>
    </div>
    <!-- grid宫格 -->
    <van-grid
      :column-num="2"
      clickable
    >
      <van-grid-item><i
          slot="icon"
          class="iconfont icon-shoucang"
        ></i>
        <span slot="text">收藏</span>
      </van-grid-item>
      <van-grid-item><i
          slot="icon"
          class="iconfont icon-lishi"
        ></i>
        <span slot="text">历史</span>
      </van-grid-item>
    </van-grid>
    <!-- cell区域 -->
    <div class="cell">
      <van-cell
        title="消息通知"
        is-link
      />
      <van-cell
        title="小智同学"
        is-link
      />
    </div>
    <!-- 退出按钮 -->
    <van-row>
      <van-button
        type="danger"
        v-if="user"
        @click="goout"
      >退出登录</van-button>
    </van-row>
  </div>
</template>
<script>
import { getUserInfo } from '@/api/user.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      userInfo: ''
    }
  },
  methods: {
    goLogin () {
      this.$router.push('/login')
    },
    goout () {
      this.$dialog.confirm({
        message: '确认退出吗？'
      })
        .then(() => {
          this.$store.commit('setToken', null)
        })
        .catch(() => {
          // on cancel
        })
    },
    async getInfo () {
      try {
        const { data: res } = await getUserInfo()
        this.userInfo = res.data
      } catch (err) {
        console.log('获取信息失败')
      }
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    this.getInfo()
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 361px;
  background: url("~@/assets/banner.png");
  background-size: cover;
  .login-btn {
    align-items: center;
    display: flex;
    flex-direction: column;
    img {
      height: 132px;
      width: 132px;
      margin-bottom: 15px;
    }
    span {
      font-size: 28px;
    }
  }
}
.header-login {
  height: 361px;
  background: url("~@/assets/banner.png");
  padding: 0px 32px 0px 32px;
  .avatal {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding-top: 75px;
    height: 230px;
    .left {
      display: flex;
      align-items: center;
      .van-image {
        width: 100px;
        height: 100px;
        margin-right: 15px;
      }
      span {
        font-size: 30px;
      }
    }
    .right {
      color: #666666;
      text-align: center;
      padding: 0;
      line-height: 32px;
      width: 115px;
      height: 32px;
      background: #ffffff;
      font-size: 20px;
      border-radius: 16px;
    }
  }
  .data {
    display: flex;
    .data-item {
      color: #ffffff;
      height: 130px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      .number {
        font-size: 36px;
      }
      .content {
        font-size: 22px;
      }
    }
  }
}
.van-grid {
  height: 141px;
  .iconfont {
    font-size: 45px;
  }
  span {
    font-size: 28px !important;
  }
  .icon-shoucang {
    color: #eb5253;
  }
  .icon-lishi {
    color: #ff9d1d;
  }
}
.cell {
  height: 200px;
}
.body {
  color: #f5f7f9;
}
.van-row {
  margin-top: 10px;
  text-align: center;
  .van-button {
    background: none;
    border: none;
    color: red;
  }
}
</style>
